<!DOCTYPE html>
<html>
<#include "./head.ftl">

<!-- style="background-color: #16baaa;" -->
<body>
<#include "./head_menu.ftl">
  <div class="layui-container">
  <div class="layui-btn-container" style="margin-bottom: 16px; text-align: center;">
            <button type="button" class="layui-btn layui-bg-blue" id="serach" style="float: left;">查&nbsp;&nbsp;&nbsp;&nbsp;询</button>
            <div class="layui-input-block">
            <input type="text" name="title" autocomplete="off" id="patternSQL" placeholder="select 1,2,3 from a " lay-verify="required" class="layui-input">
            </div>
   
  </div>
  <div class="layui-btn-container" style="margin-bottom: 16px; text-align: center;">
    <!--
     * 概览-所有已分析的请求（2024/01/01/-2024/01/01/）
     * 所有请求    独立访客      请求文件 来源地址
     * 有效的请求  日志解析耗时   静态文件  日志大小
     * 失败的请求  过滤来自此IP的请求 未找到（404） 数据传输
    -->
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">总请求数「<b id="requestTotalCount"></b>」</button>
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">独立访客「<b id="singleRequestCount"></b>」</button>
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">静态文件「<b id="staticFileCount"></b>」</button>
    <button type="button" class="layui-btn layui-bg-orange" style="float: left;">最大耗时「-」</button>
</div>
  <div class="layui-btn-container" style="margin-bottom: 6px; text-align: center;" id="logPatternsTable">
      <table class="layui-hide" id="logPatterns"></table>
  </div>

<div class="layui-btn-container" style="margin-bottom: 6px; text-align: center;" id="seachTable">
    <table class="layui-hide" id="searchResult"></table>
</div>

<div class="layui-btn-container" style="margin-bottom: 6px; text-align: center;" id="initTable">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md7"> <!-- 占一半宽度 -->
            <table class="layui-hide" id="viewTop"></table>
        </div>
        <div class="layui-col-md4"> <!-- 占一半宽度 -->
            <table class="layui-hide" id="statusCode"></table>
        </div>
    </div>
</div>
<div class="layui-btn-container" style="margin-bottom: 6px; text-align: center;" id="initTable2">
  <div class="layui-row layui-col-space10">
      <div class="layui-col-md7"> <!-- 占一半宽度 -->
          <table class="layui-hide" id="consumTop"></table>
      </div>
  </div>
</div>
  <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="${base}/layui/layui.js"></script>
<script>
    var $ = layui.$;
    var table;
    //先请求初始化数据
    showHeadMsg();//显示头部信息
    layui.use('table', function() {
        table = layui.table;
        $("#serach").click(function () {
            var patternSQL = $("#patternSQL").val();
            if (null == patternSQL || '' == patternSQL) {
                layer.msg("请先设置日志格式");
                return false;
            }
            ;
            $.ajax({
                url: "${base}/log/search",
                type: "POST",
                //async: false,
                data: {
                    patternSQL: patternSQL
                },
                success: function (res) {
                    if (0 == res.jsonCode) {
                        var title = res.obj.head;
                        var data = res.obj.body;

                        $("#seachTable").empty();
                        $("#seachTable").append('<table id="searchResult"></table>');

                        //第一个实例
                        var tableIns2 = table.render({
                            elem: '#searchResult'
                            , id: 'demoTest'
                            , height: 312
                            // ,url: '/demo/table/user/' //数据接口
                            , data: data
                            , page: true //开启分页
                            , cols: [title]
                        });
                    } else {
                        layer.msg(res.jsonMsg);
                    }
                    return false;
                }
            });
        });
// 日志格式
        $.ajax({
            url: "${base}/log/logPatterns",
            type: "POST",
            //async: false,
            success: function (res) {
                if (0 == res.jsonCode) {
                    var logTitle = res.obj.head;
                    var logData = res.obj.body;
                    $("#logPatternsTable").empty();
                    $("#logPatternsTable").append('<table id="logPatterns"></table>');
                    //第一个实例
                    var tableIns2 = table.render({
                        elem: '#logPatterns'
                        , id: 'demoTest'
                        , height: 10
                        , data: logData
                        , page: false //开启分页
                        , cols: [logTitle]
                    });
                } else {
                    layer.msg(res.jsonMsg);
                }
                return false;
            }
        });
  // 已知数据渲染
  var inst = table.render({
    elem: '#consumTop',
    cellMinWidth: 'auto',
    method: 'post',
    cols: [[ //标题栏
      {field: 'ip', title: 'IP', width: 180, align: 'center', sort: true},
      {field: 'addr', title: '地址', width: 180, align: 'center', sort: true},
      {field: 'ipCount', title: '请求次数', align: 'center', width: 100, sort: true},
      {field: 'ipProportion', title: '占比', width: 100, align: 'center'}
    ]],
    //skin: 'line', // 表格风格
    //even: true,
    url: "${base}/log/ipCount",
    page: false// 是否显示分页
  });

// 已知数据渲染
var inst = table.render({
    elem: '#viewTop',
    cellMinWidth: 'auto',
    method: 'post',
    cols: [[ //标题栏
        {field: 'urlFilter', title: '页面URL', width: 180, align: 'center', sort: true},
        {field: 'urlFilterCount', title: '计数', align: 'center', width: 90,sort: true},
        {field: 'urlFilterProportion', title: '占比', align: 'center', width: 90,sort: true},
        {field: 'urlFilterTotalTime', title: '总时长', align: 'center', width: 100,sort: true},
        {field: 'urlFilterAvgTime', title: '平均时长', align: 'center', width: 100,sort: true},
        {field: 'urlFilterMaxTime', title: '最大时长', align: 'center', width: 100,sort: true},
        {field: 'urlFilterMinTime', title: '最小时长', align: 'center', width: 100,sort: true},
    ]],
    url: "${base}/log/urlFilter",
    //skin: 'line', // 表格风格
    //even: true,
    page: true,// 是否显示分页
    limit:10
});

// 已知数据渲染
    var inst = table.render({
        elem: '#statusCode',
        cellMinWidth: 'auto',
        method: 'post',
        cols: [[ //标题栏
            {field: 'statusCode', title: '状态码', width: 100, align: 'center', sort: true},
            {field: 'statusCount', title: '计数', width: 100, align: 'center'},
            {field: 'statusProportion', title: '占比', width: 100, align: 'center'}
        ]],
        url: "${base}/log/statusCode",
        //skin: 'line', // 表格风格
        //even: true,
        page: false // 是否显示分页
    });

});

function showHeadMsg() {
    $.ajax({
        url: "${base}/log/analysis",
        type: "POST",
        //async: false,
        //data: data.field,
        success: function (res) {
            if (0 == res.jsonCode) {
                $('#requestTotalCount').text(res.obj.headMsg.requestTotalCount);
                $('#singleRequestCount').text(res.obj.headMsg.singleRequestCount);
                $('#staticFileCount').text(res.obj.headMsg.staticFileCount);
            } else {
                layer.msg(res.jsonMsg);
            }
            //close_msg();
        }, error: function () {
            layer.msg("提交失败!");
        }
    });
}
</script>
</body>
</html>